<template>
  <!--申请加盟模态框-->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content text-left join_modal_content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
          <p class="modal-title font_20" id="myModalLabel">开通产品请联系当地加盟商</p>
        </div>
        <div class="modal-body huoke_modal_body">
          <div class="form-group clear">
            <div class="huoke_inp_box font_14 clear">
              <div class="modal_city_select float_left">
                <select id="modal_province" name="modal_province" class="form-control"></select>
                <select id="modal_city" name="modal_city" class="margin_left_10 form-control"></select>
                <select id="modal_cmbArea" class="margin_left_10 form-control"></select>
              </div>
              <div class="search_city_btn_box float_left">
                <button type="button" class="bg_2577EF col_fff" @click="search_agent_btn">查询</button>
              </div>
            </div>

            <!--无代理商-->
            <div class="no_agent_box col_666 font_18" v-if="no_agent">
              <p v-if="no_query">请选择位置信息后查询加盟商信息</p>
              <p v-else>您查询的地区尚无加盟商信息,<br/>如有疑问可拨打咨询电话 021-8888 8888</p>
            </div>

            <!--代理商列表-->
            <ul class="modal_agent_list border_ccc clear" v-else v-for="(item,index) in agent_arr" :key="index">
              <li class="modal_list_li">
                <div class="modal_li_logo clear">
                  <img src="http://image.xuemei99.com/company_icon_jiameng.png" alt="" class="float_left">
                  <p class="single_line font_18 float_left">{{item.title}}</p>
                </div>
                <div class="col_666 font_14 margin_top_10">
                  <p>地址：{{item.address}}</p>
                  <p>电话：<span>{{item.phone}}</span><span class="margin_left_10">{{item.telephone}}</span></p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import sity_address from '@/js/city-address.js'
  //每个子组价都需要抛出
  export default{
    name: "modal_agent",
    methods: {
      /**
       * 点击查询代理商
       * **/
      search_agent_btn(){
        let that = this;
        that.agent_arr = [];
        //获取省，市，县
        let modal_province = $("#modal_province option:selected").text();
        let modal_city = $("#modal_city option:selected").text();
        let modal_cmbArea = $("#modal_cmbArea option:selected").text();
        let modal_select_str = modal_province + modal_city + modal_cmbArea;
        that.base.ajax_get('/site/new/join/shop?select=' + modal_select_str, function (data) {
          if (data.status == 0) {
            //如果有数据隐藏无数据提示信息
            if (data.detail.length !== 0) {
              //有加盟商信息，则隐藏无加盟商提示
              that.no_agent = false;
              that.agent_arr = data.detail;
            } else {
              //无加盟商信息，则显示无加盟商提示。和显示未查询到
              that.no_query = false;
              that.no_agent = true;
            }
          } else {
            alert(data.detail)
          }
        });
      }
    },
    //在模板渲染之后调用
    mounted () {
      sity_address.address('modal_province', 'modal_city', 'modal_cmbArea');
    },
    data () {
      return {
        "no_agent": true,
        no_query:true,
        agent_arr:[]
      }
    }
  }
</script>

<style scoped>
  ::-webkit-scrollbar { /*隐藏滚轮*/
    display: none;
  }

  .huoke_modal_body .form-group {
    padding: 0 15px;
  }

  .search_city_btn_box {
    width: 140px;
    margin-left: 20px;
  }

  .search_city_btn_box button {
    width: 100%;
    height: 40px;
    line-height: 40px;
  }

  .modal_city_select {
    width: calc(100% - 160px);
  }

  .modal_city_select select {
    border-radius: 0;
    display: inline;
    width: calc(33.333% - 10px);
    height: 40px;
    line-height: 40px;
  }

  .modal_agent_list {
    width: 100%;
    overflow-y: scroll;
    border-radius: 4px;
    padding: 0px 15px 0 0;
    height: 250px;
    margin: 24px 0 0 0;
  }

  .modal_agent_list li {
    width: calc(50% - 15px);
    box-shadow: 0 2px 10px #EAECF0;
    padding: 15px 24px;
    margin-top: 20px;
    margin-left: 15px;
  }

  .modal_li_logo img {
    width: 40px;
    height: 40px;
  }

  .modal_li_logo p {
    width: calc(100% - 60px);
    height: 40px;
    line-height: 40px;
    margin: 0 0 0 20px;
  }

  .no_agent_box {
    width: 337px;
    height: 250px;
    margin: 24px auto 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
</style>
